<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1,minimum=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no,date=no,address=no,email=no,url=no"/>
    <title>苏州数字门牌</title>
</head>


<style>
    html, body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        font-family: -apple-system-font,Helvetica Neue,sans-serif;
    }
    .page-container {
        width: 100%;
        height: 200px;
        position: fixed;
        left: 0;
        top: 0;
        background: yellow;
        overflow: hidden;
    }
    .page-top {
        width: 100%;
        height: 20px;
        position: absolute;
        left: 0;
        top: 0;
        background: red;
    }

    .page-img {
        width: 100%;
        height: auto;
        position: absolute;
        left: 0;
        top: -90px;
    }
    .page-date {
        width: 100%;
        text-align: center;
        position: fixed;
        left: 0;
        top: 290px;
        color: #969696;
        font-size: 15.8px;
        /*letter-spacing: 0.3px;*/
        background-color: #fff;
        font-weight: 500;
    }
    .page-bottom {
        width: 100%;
        height: 22px;
        position: absolute;
        left: 0;
        bottom: 0;
        background: #f7f7f7;
        z-index: 2;
    }
</style>
<body>

    <div class="page-test"></div>
    <div class="page-test2"></div>

    <div class="page-container">
<!--        <div class="page-top"></div>-->

        <img class="page-img" src="a.jpeg">
        <div class="page-date">2022年06月15日 18:32:03</div>

        <div class="page-bottom"></div>
    </div>

</body>
<script type="text/javascript">

    document.querySelector(".page-test").innerHTML = document.documentElement.clientWidth
    document.querySelector(".page-test2").innerHTML = document.documentElement.clientHeight

    document.querySelector(".page-container").style.height = document.documentElement.clientHeight + 'px'

    let year = String(new Date().getFullYear())
    let month = String(new Date().getMonth() + 1)
    let day= String(new Date().getDate())
    let hours = String(new Date().getHours())
    let minutes = String(new Date().getMinutes())
    let seconds = String(new Date().getSeconds())

    let date2 = new Date(new Date().getTime() - 24 * 60 * 60 * 1000)
    let day2= String(new Date(date2).getDate())


    // console.log(year,month,day)
    if (month.length === 1) {
        month = '0' + month
    }
    if (day.length === 1) {
        day = '0' + day
    }
    if (day2.length === 1) {
        day2 = '0' + day2
    }
    if (hours.length === 1) {
        hours = '0' + hours
    }
    if (minutes.length === 1) {
        minutes = '0' + minutes
    }
    if (seconds.length === 1) {
        seconds = '0' + seconds
    }
    let nowDate = year+'年'+month+'月'+day+'日'+' '+hours+':'+minutes+':'+seconds
    document.querySelector(".page-date").innerHTML = nowDate
    document.querySelector(".page-day").innerHTML = day2
    document.querySelector(".page-day2").innerHTML = day2

</script>
</html>
